<div class="frame" style="display:none">${this.selectContent()}</div>
<div id="styleFrame"></div>
<script>
  class DomTree {
    constructor(dom) {
      this.domRoot = dom
      this.tree = {}
      this.init()
    }
    init() {
      this.renderDom()
    }
    traver(dom, branch) {
      for (let i = 0; i < this.picker(dom).length; i++) {
        const element = this.picker(dom)[i];
        if (element.nodeType === 1) {
          let branchName = element.tagName.toLowerCase()
          if (element.className) {
            branchName = '.' + element.className
          }
          if (element.childNodes.length > 1 || (element.childNodes.length === 1 && element.childNodes[0].nodeType ===
              1)) {
            if (typeof branch[branchName] != 'object') branch[branchName] = {}
            this.traver(element, branch[branchName])
          } else {
            if (!branch[branchName]) branch[branchName] = '{}'
          }
        }
      }
    }
    picker(dom) {
      let doms = []
      for (let i = 0; i < dom.childNodes.length; i++) {
        const element = dom.childNodes[i];
        if (element.nodeType === 1 && !element.nodeName.match('STYLE') && !element.nodeName.match('SCRIPT')) {
          doms.push(element)
        }
      }
      return doms
    }
    transform(root, obj) {
      let lang = '${this.lang}'
      console.log('语言：' + lang)
      let result = '_' + JSON.stringify(obj).replace(/\"/g, '').replace(/\,/g, ';') + '_'
      result = result.split('_{')[1].split('}_')[0]
      if (lang === 'react') {
        result = result.replace(/\:|\;/g, '')
      }
      return result
    }
    renderDom() {
      this.picker(this.domRoot)
      this.traver(this.domRoot, this.tree)
      this.toClipBoard(this.transform('body', this.tree))
      document.querySelector('#styleFrame').parentNode.innerHTML = 'rendering...😁'
    }
    toClipBoard(e) {
      const input = document.createElement('input');
      document.body.appendChild(input);
      input.setAttribute('value', e);
      input.select();
      if (document.execCommand('copy')) {
        document.execCommand('copy');
        console.log('render succeed');
      }
      document.body.removeChild(input);
    }
  }
  let domTree = new DomTree(document.querySelector('.frame'))
</script>